<template>
	<Container>
		<view class="header">
			<view class="header-content" :style="{ background: 'url(' + assignment.backgroundUrl + ') 0 0 /100% 100%' }"><Article :articles="assignment.articles" /></view>
			<AudioIcon @iconTap="iconTap" :questionPress="questionPress" />
		</view>
		<Question :question="assignment.questionName" />
		<view class="articleBox">
			<view :class="{  success: chooses[index] === 'success', error: chooses[index] === 'error', hidden: chooses[index] === 'hidden'  }" @tap="tap(item, index)" class="articles" v-for="(item, index) in assignment.optionArticles" :key="index">
				<view class="box">
					<view :class="item.name"></view>
					<SuccessIcon v-if="chooses[index] === 'success'" />
				</view>
			</view>
		</view>
	</Container>
</template>

<script>
import { mixins } from '../../../common/mixins/assignmentDefault.js'
import Article from '../article.vue'
import AudioIcon from '../audioIcon.vue'
import Question from '../questionName.vue'
import Container from '../container.vue'
import SuccessIcon from '../successIcon.vue'
export default {
	data() {
		return {
			list: {
				长方形: 'oblong',
				心形: 'heart',
				五角形: 'star-five',
				正方形: 'quadrilateral',
				圆形: 'circular',
				三角形: 'triangle',
				梯形: 'trapezoid',
				平行四边形: 'parallelogram'
			}
		}
	},
	mixins: [mixins],
	components: { Article, AudioIcon, Question, Container, SuccessIcon },
	beforeMount() {
		this.assignment = this.question
		this.assignment.optionArticles = this.assignment.optionArticles.map(item => {
			item.name = this.list[item.name]
			return item
		})
	},
	methods: {
		tap: function(item, index) {
			if (this.isComplete) return
			this.isComplete = true
			if (item.isMatched) {
				this.optionStatus('success', index)
				this.assignment.optionArticles.map((item, current) => {
					if (index !== current) {
						this.optionStatus('hidden', current)
					}
				})
				this.$parent.next({
					isSure: true
				})
			} else {
				this.optionStatus('error', index)
				this.$parent.next()
			}
		}
	}
}
</script>

<style scoped lang="stylus">
.header
	height 45vh
	width 100%
	overflow hidden
	border-radius 70rpx
	border 12rpx solid #FCC77D
	box-sizing border-box
	transform translate3d(0, 0, 0)
	position relative
	margin 5vh 0
	.header-content
		position absolute
		height 100%
		width 1080rpx
		left 50%
		top 50%
		transform translate3d(-50%, -50%, 0)
		z-index 98
.articleBox
	width 100%
	height 40vh
	display flex
	flex-wrap wrap
	justify-content center
	align-items center
	.articles
		width 30%
		height 250rpx
		transition all 0.5s
		color #FFC268
		justify-content center
		align-items center
		display flex
		position relative
		.box
			width 85%
			height 85%
			transition all 0.5s
			border 8rpx solid #FCC77D
			box-sizing border-box
			border-radius 30rpx
			justify-content center
			align-items center
			display flex
			.triangle
				width 0
				height 0
				border-left 70rpx solid transparent
				border-right 70rpx solid transparent
				border-bottom 150rpx solid #C6E24A
			.quadrilateral
				width 130rpx
				height 130rpx
				background #FE9862
			.circular
				width 130rpx
				height 130rpx
				background #53A6D0
				border-radius 50%
			.parallelogram
				width 120rpx
				height 110rpx
				transform skew(-20deg)
				background-color red
			.trapezoid
				border-bottom 90rpx solid red
				border-left 20rpx solid transparent
				border-right 20rpx solid transparent
				width 100rpx
				height 0
			.star-five
				width 0
				height 0
				position relative
				display block
				border-left 100rpx solid transparent
				border-right 100rpx solid transparent
				border-bottom 70rpx solid red
				transfrom rotate(35deg)
			.star-five:before
				width 0
				height 0
				border-left 30rpx solid transparent
				border-right 30rpx solid transparent
				border-bottom 80rpx solid red
				position absolute
				top -50rpx
				left -65rpx
				display block
				transform rotate(-35deg)
				content ''
			.star-five:after
				width 0
				height 0
				display block
				position absolute
				color red
				top 3rpx
				left -105rpx
				border-left 100rpx solid transparent
				border-right 100rpx solid transparent
				border-bottom 70rpx solid red
				content ''
				transform rotate(-70deg)
			.oblong
				width 150rpx
				height 100rpx
				background red
			.heart
				width 100rpx
				height 90rpx
				position relative
			.heart:before, .heart:after
				width 80rpx
				height 130rpx
				left -5rpx
				top -20rpx
				background-color #f00
				position absolute
				content ''
				border-radius 50rpx 50rpx 0 0
				-webkit-transform rotate(-45deg)
				transform rotate(-45deg)
				tansform-origin 0 100%
			.heart:after
				left -25rpx
				top -10rpx
				transform rotate(45deg)
				transform-origin 100% 100%
</style>
